<template>
  <div class="entry_sound" :id="listData.id" :class="{ undertone: launch }">
    <div class="list_text_box" :class="{ list_text_box_fit: entry }">
      <div class="list_text_title" v-if="listData.title" :class="{ list_text_title_fit: launch }">
        <span class="text" v-html="listData.title"></span>
        <!-- 状态标签 -->
        <div class="tag" v-if="!entry && launch && !selfInfo.statusNew">
          <span class="success" v-if="selfInfo.status == '2' || selfInfo.status == '3'">已回复</span>
          <span class="danger" v-if="selfInfo.status == '0'">未受理</span>
          <span class="warning" v-if="selfInfo.status == '1'">已转办</span>
        </div>
        <div class="tag" v-if="!entry && launch && selfInfo.statusNew">
          <span class="success" v-if="selfInfo.statusNew == '1'">已回复</span>
          <span class="danger" v-if="selfInfo.statusNew == '0'">未回复</span>
        </div>
      </div>
      <div class="info_box info_box_fit" v-if="!entry && launch">
        <div class="info">
          <div class="info_label">
            <span class="label_fit" v-if="selfInfo.proTypeName && launch">{{ selfInfo.proTypeName }}</span>
            <span class="time" :class="{ space: selfInfo.proTypeName && launch }">{{ selfInfo.createTime }} 发出</span>
          </div>
        </div>
      </div>
      <!-- <div class="voice_box">
        <MyVoice
          v-for="(item, index) in listData.audioList"
          :audioId="item.id"
          :key="index"
          :audioData="item"
          @delete="deleteVoice"
          :isDelete="entry"></MyVoice>
      </div> -->
      <div class="list_text_input">
        <van-field
          class="scroe_input"
          v-model="listData.entryCont"
          rows="6"
          autosize
          type="textarea"
          :placeholder="listData.placeholder || '请输入'"
          show-word-limit
          v-if="entry" />
        <div v-else v-html="removeHtmlStyle(listData.entryCont || listData.content) || '无'" class="entry_cont"></div>
      </div>
      <div class="list_annex" v-if="!entry && selfInfo.fileShowVOS.length > 0">
        <ImgUpload :albumList="selfInfo.fileShowVOS" :entry="false" :showImg="false" />
      </div>
      <div class="info_time_people" v-if="!entry && !launch">
        <div class="info_label">
          <span class="time">{{ selfInfo.createTime }}</span>
        </div>
        <div class="info_label" v-if="!launch && selfInfo.transferdList && selfInfo.transferdList.length > 0">
          <span class="transfer">
            转办：
            <span>
              {{ selfInfo.transferdList.join(';') }}
            </span>
          </span>
        </div>
      </div>
      <div class="info_box" v-if="!entry">
        <div class="iconfont icon-touxiang6"></div>
        <div class="info">
          <div class="info_label fit">
            <span class="time">{{ selfInfo.createBy }}</span>
            <!-- <span class="time">
              <span>职级：</span>
              {{ selfInfo.orgPostRoleType }}
            </span> -->
            <span class="time">
              <!-- <span>部门：</span> -->
              {{ selfInfo.orgName }}
            </span>
          </div>
        </div>
      </div>
    </div>
    <div class="list_voice_box" v-if="entry">
      <VoiceBtnFlutter
        @recordend="recordend"
        v-if="['flutter-android', 'flutter-ios', 'flutter'].includes(platform)"></VoiceBtnFlutter>
      <VoiceBtn @recordend="recordend" v-else></VoiceBtn>
    </div>
  </div>
</template>

<script>
import MyVoice from '@com/MyVoice'
import VoiceBtn from '@com/VoiceBtn'
import VoiceBtnFlutter from '@com/VoiceBtnFlutter'
import ImgUpload from '@com/ImgUpload'
import { mapState } from 'vuex'
export default {
  name: 'TroubleShow',
  components: {
    MyVoice,
    VoiceBtn,
    ImgUpload,
    VoiceBtnFlutter,
  },
  props: {
    listData: {
      type: Object,
      default: () => {
        return {
          title: '标题',
          entryCont: '输入内容',
          audioList: [],
        }
      },
    },
    selfInfo: {
      type: Object,
      default: () => {
        return {}
      },
    },
    entry: {
      type: Boolean,
      default: true,
    },
    launch: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      input: '',
      platform: localStorage.platform,
    }
  },
  computed: {},
  watch: {},
  created() {},
  mounted() {},
  methods: {
    recordend(li) {
      let resData = JSON.parse(li)
      this.listData.entryCont = this.listData.entryCont + resData.entryCont
      this.$forceUpdate()
    },
    // 删除录音
    deleteVoice(e) {
      this.listData.audioList.splice(
        this.listData.audioList.findIndex(item => item.id === e.id),
        1
      )
    },
    loseFocus(val) {
      this.listData.entryCont = val
    },
    inputChange(val) {
      this.$emit('btnJudge', val)
    },
    removeHtmlStyle(html) {
      let rel = /style\s*?=\s*?([‘"])[\s\S]*?\1/g
      let newHtml = ''
      if (html) {
        newHtml = html.replace(rel, '')
      }
      return newHtml
    },
  },
}
</script>

<style lang="scss" scoped>
.undertone {
  background-color: #fff8ed !important;
}
.entry_sound {
  border-radius: 2px;
  background-color: #ffffff;
  display: flex;
  justify-content: space-between;
  margin-bottom: 10px;
  box-shadow: 0 0 10px 0 rgba(4, 0, 0, 0.15);

  .list_text_box {
    flex: 1;
    padding: 16px 25px;
    position: relative;
    .tag {
      position: absolute;
      top: 0;
      right: 0;
      /deep/.van-tag {
        padding: 3px;
      }
    }
    // 标题
    .list_text_title {
      font-weight: bold;
      color: #333;
      margin-bottom: 15px;
      .text {
        background-image: linear-gradient(#ffffff 50%, #f9f1e8);
      }
    }
    .list_text_title_fit {
      position: relative;
      padding-right: 60px;
      .text {
        background-image: none;
      }
      .tag {
        position: absolute;
        top: 0;
        right: -10px;
        font-weight: normal;
        .success,
        .danger,
        .warning {
          padding: 5px 10px;
          border-radius: 3px;
        }
        .success {
          color: #3fa83f;
        }
        .danger {
          color: #a40002;
          background-color: #f6dfd5;
        }
        .warning {
          color: #4a79ba;
          background-color: #e4ebf5;
        }
      }
    }
    .list_text_title_fit:before {
      content: '问';
      background-color: #a40002;
      color: #fff;
      font-size: 12px;
      padding: 0 3px;
      position: absolute;
      left: -22px;
      top: 3px;
    }
    .voice_box {
      width: 100%;
    }
    .entry_cont {
      line-height: 21px;
      color: #333;
      word-break: break-all;
      user-select: text;
      -webkit-user-select: text;
      -moz-user-select: text;
      -ms-user-select: text;
    }
    .info_time_people {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 10px;
      flex-wrap: wrap;
      .info_label {
        color: #999999;
        margin-top: 10px;
        .time {
          font-size: 12px;
          display: block;
        }
        .transfer {
          font-size: 12px;
          display: block;
          span {
            color: #666666;
            background-color: #f5f5f5;
            padding: 3px 8px;
            border-radius: 2px;
          }
        }
      }
    }
    .info_box {
      display: flex;
      justify-content: flex-start;
      align-items: center;
      margin-top: 10px;
      .iconfont {
        font-size: 25px;
        color: #999999;
        margin-right: 10px;
      }
      .info {
        .info_label {
          color: #999999;
          display: flex;
          align-items: center;
          .label_fit {
            // background-color: #fdeed7;
            border-radius: 4px;
            padding: 3px 8px 3px 0;
            font-size: 12px;
            color: #a57d60;
          }
          .label {
            background-color: #fdeed7;
            border-radius: 4px;
            padding: 3px 8px;
            font-size: 12px;
            color: #a57d60;
            // margin-left: 5px;
          }
          .time {
            font-size: 12px;
          }
          .space {
            padding-left: 10px;
            margin-left: 10px;
            border-left: 1px solid #999999;
          }
        }
        .fit {
          display: flex;
          // flex-direction: column;
          align-items: center;
          .time {
            display: inline-block;
            color: #000000;
            padding-left: 5px;
            margin-left: 5px;
            border-left: 1px solid #999999;
            font-size: 13px;
            &:first-child {
              padding-left: 0;
              margin-left: 0;
              border-left: 0;
              color: #a57d60;
              font-weight: bold;
              // font-size: 14px;
            }
            span {
              color: #999999;
            }
          }
        }
      }
    }
    .info_box_fit {
      margin-bottom: 10px;
    }
  }
  .list_text_box_fit {
    padding: 16px 14px;
  }

  .list_voice_box {
    border-left: 1px solid #efefef;
    width: 80px;
  }
}
</style>
